<template>
  <div class="write-list clearfix">
    <div class="org-tree mr-10 pull-left scrollbar">
      <!-- accordion：是否每次只打开一个同级树节点展开 -->
      <!-- check-strictly：在显示复选框的情况下，是否严格的遵循父子不互相关联的做法 -->
      <!-- highlight-current：是否高亮当前选中节点 -->
      <!-- default-expanded-keys：默认展开的节点的 key 的数组 -->
      <!-- default-checked-keys：默认勾选的节点的 key 的数组 -->
      <!-- expand-on-click-node：是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。 -->
      <!-- current-change：当前选中节点变化时触发的事件 -->
      <el-tree
        ref="orgtree"
        node-key="id"
        accordion
        :data="list"
        :props="defaultProps"
        :check-strictly="true"
        :highlight-current="true"
        :default-expanded-keys="ids"
        :expand-on-click-node="false"
        :default-checked-keys="checkedIds"
        @current-change="orgCurrentChange"
      >
        <div slot-scope="{ node, data }" class="text">
          <i class="icon-tree" />
          <span :title="data.nodeName">{{ data.nodeName }}</span>
        </div>
      </el-tree>
    </div>
    <div class="right-box pull-right">
      <slot />
    </div>
  </div>
</template>
<script>
export default {
  props: {
    handleOrgTree: {
      type: Function,
      default: null
    }
  },
  data () {
    return {
      defaultProps: {
        label: 'nodeName',
        children: 'childrenList'
      },
      ids: [],
      checkedIds: [],
      list: []
    }
  },
  created () {
    this.getOrgTree()
  },
  methods: {
    getOrgTree () {
      this.list = [
        {
          id: 1,
          code: 'code1',
          treeCode: 'treeCode1',
          nodeName: '节点1',
          childrenList: [
            {
              id: 2,
              code: 'code2',
              treeCode: 'treeCode2',
              nodeName: '节点2'
            },
            {
              id: 3,
              code: 'code3',
              treeCode: 'treeCode3',
              nodeName: '节点3'
            },
            {
              id: 4,
              code: 'code4',
              treeCode: 'treeCode4',
              nodeName: '节点4',
              childrenList: [
                {
                  id: 41,
                  code: 'code41',
                  treeCode: 'treeCode41',
                  nodeName: '节点41'
                }
              ]
            }
          ]
        }
      ]
      this.$nextTick(function () {
        const nid = this.list[0].id
        this.ids = [nid]
        this.checkedIds = [nid]
      })
    },
    orgCurrentChange (node) {
      this.$refs.orgtree.setCheckedKeys([node.id])
      if (this.handleOrgTree) {
        this.handleOrgTree(node)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.org-tree {
  width: 200px;
  height: 100%;
  overflow-y: auto;
  background-color: #ffffff;
  ::v-deep .el-tree {
    background: none;
    color: var(--color-black);
    .el-tree-node:focus > .el-tree-node__content {
      background: none;
      color: var(--color-black);
      .el-tree-node__expand-icon {
        color: var(--color-black);
      }
      .el-tree-node__expand-icon.is-leaf {
        color: transparent !important;
      }
    }
    .is-checked > .el-tree-node__content,
    .el-tree-node__content:hover {
      background: var(--primary-bg) !important;
      color: var(--color-white) !important;
      .el-tree-node__expand-icon {
        color: var(--color-white) !important;
      }
      .el-tree-node__expand-icon.is-leaf {
        color: transparent !important;
      }
    }
    .el-tree-node__content {
      height: 40px;
      .el-tree-node__expand-icon {
        margin-left: 10px;
      }
    }
    .el-tree-node[aria-disabled='true'] > .el-tree-node__content,
    .el-tree-node[aria-disabled='true'] > .el-tree-node__content:hover {
      background: none !important;
      cursor: initial;
    }
    .text {
      margin-left: 5px;
      overflow: hidden;
      font-size: 14px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
</style>
